<template>
  <div class="adjust">
    <!-- 商户调整 -->
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      v-show="isShow"
    >
      <!-- 商户账号 -->
      <el-form-item label="商户账号" size="small">
        <el-input
          size="medium"
          v-model="ruleForm.sv_ul_acountno"
          @keyup.enter.native="handleSearch(ruleForm.sv_ul_acountno)"
          placeholder="请输入商户账号"
        >
          <i
            slot="suffix"
            class="iconfont iconhtmal5icon25"
            @click="handleSearch(ruleForm.sv_ul_acountno)"
          ></i>
        </el-input>
      </el-form-item>
      <!-- 现有服务商 -->
      <el-form-item label="现有服务商" size="small">
        <el-input size="medium" v-model="ruleForm.sv_d_name" disabled></el-input>
      </el-form-item>
      <!-- 调整服务商 -->
      <el-form-item label="调整服务商" size="small">
        <el-select
          size="medium"
          v-model="ruleForm.sv_d_companyname"
          filterable
          placeholder="请选择服务商"
          @change="handleSelectFacilitator"
          clearable
        >
          <el-option
            v-for="(item, index) in facilitatorList"
            :key="index"
            :label="item.sv_d_companyname == null ? item.sv_d_name : item.sv_d_companyname"
            :value="item.distributor_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 确认按钮 -->
      <el-form-item size="large">
        <el-button style="margin-left: 20%;padding: 8px 50px" type="primary" @click="onSubmit">服务商调整</el-button>
      </el-form-item>
    </el-form>
    <!-- 版本调整 -->
    <el-form :model="form" ref="form" label-width="120px" class="demo-ruleForm">
      <!-- 商户账号 -->
      <el-form-item label="商户ID/账号" size="small">
        <el-input
          size="medium"
          v-model="form.criteria"
          @keyup.enter.native="handleSearchVersions(form.criteria)"
          placeholder="请输入商户ID/账号"
        >
          <i
            slot="suffix"
            class="iconfont iconhtmal5icon25"
            @click="handleSearchVersions(form.criteria)"
          ></i>
        </el-input>
        <el-tooltip class="item" effect="dark" content="仅限高级版本调整为连锁版本" placement="top">
          <i
            style="color: #30c17b;font-size: 20px;margin-left: 10px;cursor: pointer"
            class="iconfont iconwenhao1"
          ></i>
        </el-tooltip>
      </el-form-item>
      <!-- 店铺名称 -->
      <el-form-item label="店铺名称" size="small">
        <el-input size="medium" v-model="form.sv_us_name" disabled></el-input>
      </el-form-item>
      <!-- 当前版本 -->
      <el-form-item label="当前版本" size="small">
        <el-input size="medium" v-model="form.orgVersion" disabled></el-input>
      </el-form-item>
      <!-- 调整原因 -->
      <el-form-item label="调整原因" size="small">
        <el-input size="medium" v-model="form.updateReason" placeholder="请输入调整原因"></el-input>
      </el-form-item>
      <!-- 调整版本 -->
      <el-form-item label="调整版本" size="small">
        <el-select size="medium" v-model="form.newVersion" disabled>
          <el-option label="连锁版" value="连锁版"></el-option>
        </el-select>
      </el-form-item>
      <!-- 确认按钮 -->
      <el-form-item size="large">
        <el-button style="margin-left: 20%;padding: 8px 50px" type="primary" @click="onAdjust">版本调整</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 商户调整
      ruleForm: {
        sv_d_companyname: "", // 调整服务商
        distributor_id: "", // 服务商id
        sv_ul_acountno: "", // 商户账号
        sv_d_name: "" // 现有服务商
      },
      isShow: true,
      // 服务商列表
      facilitatorList: [],
      // 发送的数据
      newdistributor_id: "", // 调整后的服务商id
      user_id: "", // 商户id
      orgnewdistributor_id: "", // 现有的服务商id
      // 版本调整
      form: {
        criteria: "", // 查询字段
        sv_us_name: "", // 店铺名称
        orgVersion: "", // 旧版本
        newVersion: "连锁版", // 新版本
        updateReason: "" // 调整原因
      },
      orgVersionid: "4", // 旧版本id
      newVersionid: "3", // 新版本id
      user_id: "", // 商户id
      updateReason: "", // 调整原因
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"])
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      if (this.userId != 1) {
        // 隐藏权限不足页面
        this.isShow = false;
      }
      if (this.userId == 1) {
        // 获取服务商
        this.$api.getService(this.myToken).then(res => {
          this.facilitatorList = res.values.map(v => {
            return {
              ...v
            };
          });
        });
      }
    },
    // 查找商户
    handleSearch(val) {
      if (val == "") {
        this.$message({
          type: "warning",
          message: "请输入查找商户"
        });
        return;
      }
      this.$api.FindMerchantsByAccount(val.trim(), this.myToken).then(res => {
        if (!values) {
          this.$message.error("请输入商户ID");
        } else {
          this.orgnewdistributor_id = values.distributor_id;
          this.user_id = values.user_id;
          this.ruleForm.sv_d_name = values.sv_d_name;
        }
      });
    },
    // 选择服务商的回调
    handleSelectFacilitator(val) {
      this.newdistributor_id = val;
    },
    // 调整服务商的方法
    onSubmit() {
      this.$api
        .adjustmentService(
          this.newdistributor_id,
          this.user_id,
          this.orgnewdistributor_id,
          this.myToken
        )
        .then(res => {
          const { values, succeed } = res;
          if (succeed) {
            this.$message({
              type: "success",
              message: values
            });
          } else {
            this.$message.error(values);
          }
        });
    },
    // 查找调整版本的商户
    handleSearchVersions(val) {
      if (val == "") {
        this.$message({
          type: "warning",
          message: "请输入查找商户"
        });
        return;
      }
      this.$api.findMerchantByVersion(val.trim(), this.myToken).then(res => {
        const { values, succeed } = res;
        if (succeed) {
          this.user_id = values.user_id;
          this.form.orgVersion = "高级版";
          this.form.sv_us_name = values.sv_us_name;
        } else {
          if (!values) {
            this.$message.error("请输入正确的ID/账号");
            return;
          }
          this.$message.error(values);
        }
      });
    },
    // 调整版本的方法
    onAdjust() {
      this.$api
        .versionToAdjust(
          this.orgVersionid,
          this.newVersionid,
          this.updateReason,
          this.user_id,
          this.myToken
        )
        .then(res => {
          const { values, succeed } = res;
          if (succeed) {
            this.$message({
              type: "success",
              message: values
            });
          } else {
            this.$message.error(values);
          }
        });
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.adjust {
  // background-color: #fff;
  overflow: hidden;
  .demo-ruleForm {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .iconfont {
    margin-right: 5px;
    line-height: 36px;
    font-size: 25px;
    color: #0094ff;
    cursor: pointer;
  }
}
// 修改输入框样式
.adjust @{deep} .el-input {
  margin-bottom: 20px;
  width: 500px;
}
// 输入框右边的小提示
.adjust @{deep} .el-upload-list--picture {
  width: 500px;
}
// 表单样式
.adjust @{deep} .el-form {
  padding: 20px 25% 10px;
  box-sizing: border-box;
}
// 输入框的宽度
.adjust @{deep} .el-input__inner {
  width: 500px;
}
.adjust @{deep} .el-input.is-disabled .el-input__inner {
  color: #000;
}
</style>

